<template>
    <div>
        <a-row :gutter="24" align="middle" justify="center">
            <a-col :span="6">
                <a-button block @click="exportData">备份所有数据</a-button>
            </a-col>
            <a-col :span="6">
                <a-button block @click="exportByKey('user')">备份客户数据</a-button>
            </a-col>
            <a-col :span="6">
                <a-button block @click="exportByKey('order')">备份订单数据</a-button>
            </a-col>
            <a-col :span="6">
                <a-button block @click="exportByKey('product')">备份产品数据</a-button>
            </a-col>
        </a-row>
        <!-- <a-button @click="exportXlsx">导出Excel表格</a-button> -->
        <div class="auto-save-config">
            <a-form :form="form" @submit="handleSubmit">
                <a-form-item v-bind="formItemLayout" label="退出时保存">
                    <a-switch v-decorator="['saveOnExit', { valuePropName: 'checked', initialValue: false}]"/>
                </a-form-item>
                <a-form-item v-bind="formItemLayout" label="开启定时自动保存">
                    <a-switch v-decorator="['enable', { valuePropName: 'checked', initialValue: false}]"/>
                </a-form-item>

                <a-form-item v-bind="formItemLayout" label="自定义存储路径">
                    <a-row :gutter="8">
                        <a-col :span="18">
                            <a-input v-decorator="['savePath']" disabled/>
                        </a-col>
                        <a-col :span="6">
                            <a-button @click="browserPath">浏览</a-button>
                        </a-col>
                    </a-row>
                </a-form-item>
                <a-form-item v-bind="formItemLayout" label="保存间隔" style="margin-bottom:0;">
                    <a-row :gutter="8">
                        <a-col :span="4">
                            <a-input-number
                                v-decorator="['intervals', 
                                                        {
                                                            initialValue: 1, 
                                                            rules:[
                                                                { required: true, message: '请数据时间间隔' },
                                                                { pattern: /^[0-9]*$/, message: '请输入有效数字' }
                                                            ]
                                                        }
                                                    ]"
                            />
                        </a-col>
                        <a-col :span="4">
                            <a-form-item style="display:inline-block;width: 100%;margin-bottom:0">
                                <a-select v-decorator="['intervalUnit', { initialValue:'hours' }]">
                                    <a-select-option value="hours">小时</a-select-option>
                                    <a-select-option value="minutes">分钟</a-select-option>
                                    <a-select-option value="seconds">秒</a-select-option>
                                </a-select>
                            </a-form-item>
                        </a-col>
                    </a-row>
                </a-form-item>
                <a-form-item v-bind="tailFormItemLayout">
                    <a-button type="primary" html-type="submit">保存设置</a-button>
                </a-form-item>
            </a-form>
        </div>
    </div>
</template>
<script>
import { mapGetters } from 'vuex';
import db from '@/components/db';
import { Modal } from 'ant-design-vue';
export default {
    data() {
        return {
            showAutoSaveConfig: false,
            formItemLayout: {
                labelCol: {
                    span: 6
                },
                wrapperCol: {
                    span: 14
                }
            },
            tailFormItemLayout: {
                wrapperCol: {
                    xs: {
                        span: 24,
                        offset: 0
                    },
                    sm: {
                        span: 16,
                        offset: 8
                    }
                }
            }
        };
    },
    created() {
        this.form = this.$form.createForm(this);
    },
    mounted() {
        console.log(this.autoSaveConfig);
        this.form.setFieldsValue({
            enable: this.autoSaveConfig.enable,
            intervals: this.autoSaveConfig.intervals,
            intervalUnit: this.autoSaveConfig.intervalUnit,
            saveOnExit: this.autoSaveConfig.saveOnExit,
            savePath: this.autoSaveConfig.savePath
        });
    },
    methods: {
        handleSubmit(e) {
            e.preventDefault();
            this.form.validateFieldsAndScroll((err, values) => {
                if (!err) {
                    console.log(values);
                    this.$store.commit('setAutoSaverConfig', values);
                }
            });
        },
        browserPath() {
            this.$store
                .dispatch('selectAutoSavePath')
                .then(path => {
                    this.form.setFieldsValue({
                        savePath: path
                    });
                })
                .catch(reason => {
                    if (reason.message !== 'canceled') {
                        this.$error({ title: reason.message });
                    }
                });
        },
        exportData() {
            db.exportData()
                .then(() => {
                    Modal.success({
                        title: '导出成功'
                    });
                })
                .catch(reason => {
                    if (reason.message !== 'canceled') {
                        Modal.error({
                            title: '导出失败'
                        });
                    }
                });
        },
        exportByKey(key) {
            db.exportDataByKey(key)
                .then(() => {
                    Modal.success({
                        title: '导出成功'
                    });
                })
                .catch(reason => {
                    if (reason.message !== 'canceled') {
                        Modal.error({
                            title: '导出失败'
                        });
                    }
                });
        },
        exportXlsx() {
            db.exportXlsx()
                .then(() => {
                    Modal.success({
                        title: '导出成功'
                    });
                })
                .catch(reason => {
                    if (reason.message !== 'canceled') {
                        Modal.error({
                            title: '导出失败'
                        });
                    }
                });
        }
    },
    computed: {
        ...mapGetters(['autoSaveConfig'])
    }
};
</script>
<style lang="stylus" scoped>
.auto-save-config {
    margin-top: 24px;
}
</style>
